<!--
 * Description: Tec新增页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/24 09:28
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="120px" :model="formData" size="mini">
      <el-row>
        <!--料号-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.material')">
            <el-input v-model="formData.material" v-blur:material="formData" clearable />
          </el-form-item>
        </el-col>

        <!--年份-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.year')">
            <el-date-picker v-model="formData.year" type="year" value-format="yyyy" />
          </el-form-item>
        </el-col>

        <!--料件描述-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.materialDescription')">
            <el-input
              v-model="formData.materialDescription"
              v-blur:materialDescription="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--料件分组-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.materialGroup')">
            <el-input v-model="formData.materialGroup" v-blur:materialGroup="formData" clearable />
          </el-form-item>
        </el-col>

        <!--Source Type-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.sourceType')">
            <el-input v-model="formData.sourceType" v-blur:sourceType="formData" clearable />
          </el-form-item>
        </el-col>

        <!--人工维护价格-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.up')">
            <BaseInput
              v-model="formData.up"
              v-blur:up="formData"
              clearable
              :max="9999999999.99999999"
              :min="0"
              :placeholder="$t('input.placeholder')"
              :precision="4"
            />
          </el-form-item>
        </el-col>

        <!--系统价格-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.pir')">
            <BaseInput
              v-model="formData.pir"
              v-blur:pir="formData"
              clearable
              :max="9999999999.99999999"
              :min="0"
              :placeholder="$t('input.placeholder')"
              :precision="4"
            />
          </el-form-item>
        </el-col>

        <!--人工价格/系统价格比-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.ratio')">
            <el-input clearable disabled :value="`${(upSysPriceRatio * 100).toFixed(2)}%`" />
          </el-form-item>
        </el-col>

        <!--Tower-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.tower')">
            <el-input v-model="formData.tower" v-blur:tower="formData" clearable />
          </el-form-item>
        </el-col>
        <!--备注-->
        <el-col :span="12">
          <el-form-item :label="$t('Tec.remark')">
            <el-input v-model="formData.remark" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block; text-align: center; margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
import { costPoolPriceAdd } from '@/api/quote/tec'

export default {
  name: 'TecAdd',
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: {}
    }
  },
  computed: {
    upSysPriceRatio() {
      if (!Number(this.formData.up) || !Number(this.formData.pir)) {
        return ''
      }
      return Number(this.formData.up) / Number(this.formData.pir)
    }
  },
  methods: {
    async save() {
      try {
        this.isRequesting = true
        await costPoolPriceAdd({
          ...this.formData,
          upPirPercent: this.$isNumber(this.upSysPriceRatio) ? this.upSysPriceRatio.toFixed(4) : ''
        })
        this.$emit('save')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped></style>
